// title 粘性定位



//ajax
$(function(){
    // 调用当前点击商品pid
    detailData()
    function detailData(){
        let shopID = localStorage.getItem("shopID");
        let uid = localStorage.getItem("uid");
        console.log(uid);
        $.ajax({
            type:"get",
            url:"http://jx.xuzhixiang.top/ap/api/detail.php",
            data:{
                id:shopID,
            },
            success:function(res){
                console.log(res.data)
                //  标题渲染
                let detailTitle = document.querySelector(".detail-title-left");
                let title = "";
                title+=`
                    <i class="detail-title-left-pname">${res.data.pname}</i>
                    <span>|</span>
                    <a href="#">${res.data.pdesc}</a>
                `;
                detailTitle.innerHTML=title;
                //图片渲染
                let detailPic = document.querySelector(".detail-main-left");
                let pic ="";
                pic+=`
                    <div class="detail-main-left-img">
                        <img src="${res.data.pimg}" alt="">
                    </div>
                `;
                detailPic.innerHTML+=pic;

                // 详情信息渲染
                let detailJoin = document.querySelector(".detail-main-right")
                let joindata = "";
                joindata+=`
                   
                    <h2>${res.data.pname}</h2>
                    <p class="detail-main-right-desc">
                        <b class="mi-font-color">12.7-12.8到手价<b>${res.data.pprice}元</b>，50米金兑换95折券</b>
                        ${res.data.pdesc}
                    </p>
                    <p class="mi-font-color detail-main-self">小米自营</p>
                    <p class="mi-font-color detail-main-right-price">${res.data.pprice}元<del>${res.data.pprice}元</del></p>
                    <div class="detail-main-right-bottom">
                        <div class="detail-main-adress">

                        </div>
                        <h3>选择颜色</h3>
                        <div class="detail-color-selection">
                            <div class="color-choice">
                                深空蓝
                            </div>
                            <div class="color-choice">
                                象牙白
                            </div>
                            <div class="color-choice">
                                典雅黑
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="detail-check-shop">
                            <ul>
                                <li>
                                    <span>${res.data.pname}</span>
                                    <span class="detail-check-price">${res.data.pprice}元</span>
                                </li>
                                <li class="detail-sum">总计${res.data.pprice}:元</li>
                            </ul>
                            
                        </div>
                        <div class="detail-click">
                            <button class="detail-join-car">
                                 
                                <a href="car.html" target="_blank">加入购物车</a> 
                            </button>
                            <div class="detali-like">
                                <a href="car.html" target="_blank">喜欢</a>
                                
                            </div>
                        </div>
                        <div class="detail-right-copyright">
                            <span><i> </i>小米自营</span>
                            <span><i> </i>小米发货</span>
                            <span><i> </i>7天无理由退货</span>
                            <span><i> </i>运费说明</span>
                            <span><i> </i>企业信息</span>
                            <span><i> </i>7天价格保护</span>
                        </div>

                    </div>
               
                `;
                detailJoin.innerHTML=joindata;

                // 点击加入购物车，调用接口
                $(".detail-join-car").click(function(){
                    console.log(shopID)
                    $.ajax({
                        type:"get",
                        url:"http://jx.xuzhixiang.top/ap/api/add-product.php",
                        data:{
                            uid:uid,
                            pid:shopID,
                            pnum:1,
                        },
                        success:function(res){
                            console.log(res);
                        }
                    })
                })
            }
            
        })
    }
    
})